<template>
  <div class="cart-item"
       @click="itemClick">
    <img v-lazy="data.picture"/>
    <div class="center">
      <div class="ellipsis-2">{{ data.name }}</div>
      <div class="ellipsis">{{ data.attrsText }}</div>
    </div>
    <div class="right">
      <div>￥{{ data.price }}</div>
      <div>×{{ data.count }}</div>
    </div>
    <div class="close"
         @click.stop="closeClick">
      ×
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import message from '@/components/library/Message/index'
import {useCartStore} from '@/stores/cart'
import type {CartItem} from '@/types/cart'
import {useRouter} from 'vue-router'

let props = defineProps<{
  data: CartItem
}>()
let cartStore = useCartStore()
let router = useRouter()

let closeClick = async () => {
  let res = await cartStore.deleteFromCart(props.data)
  if (!res) return message.error('删除失败')
  message.success('删除成功')
}
let itemClick = () => {
  router.push(`/product/${props.data.id}`)
}
</script>

<style lang="less"
       scoped>
.cart-item {
  height: 112px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;

  &:hover {
    .close {
      opacity: 1;
    }
  }

  img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }

  .center {
    flex: 1;
    overflow: hidden;

    div:nth-of-type(1) {
      font-size: 16px;
    }

    div:nth-of-type(2) {
      color: #999999;
    }
  }

  .right {
    margin-left: 10px;
    text-align: center;

    div:nth-of-type(1) {
      font-size: 16px;
      color: @priceColor;
    }

    div:nth-of-type(2) {
      padding-top: 5px;
      color: #999999;
    }
  }

  .close {
    margin-left: 15px;
    width: 20px;
    font-size: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
    opacity: 0;
    cursor: pointer;
  }
}
</style>